<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud</title>
</head>
<body>
    <h1>Design your taco!</h1>
    <img th:src="@{/images/TacoCoud.png}"> />
    <form method="post" th:object="${design}" >
        <div class="grid">
            <div th:each="type:${types}" class="ingredient=group" th:id="${type.toString()}">
                <h3>Designate your wrap:</h3>
                <div th:each="ingredient:${wrap}" th:id="${type.toString().toLowerCase()}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">ingredient</span>
                </div>
            </div>

            <h3>Name your taco creation</h3>
            <input type="text" th:field="*{name}"/>
            <br/>
            <button>Submit your taco</button>
        </div>

    </form>
</body>
</html>